<template>
  <view class="">
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">制作对比图</block>
    </cu-custom>
    <view style="margin-bottom: 120rpx;">
      <view class="title u-f-ac u-f-jsb mbttom15">
        <view>*标题</view>
        <input type="text" placeholder="请输入标题" placeholder-style="color:#999;" v-model="title" />
      </view>
      <view v-for="(item, index) in list" :key="index">
        <view class="contents u-f relative">
          <text class="cuIcon-delete abs" @click="deleteItem(index)" />
          <view class="relative" v-for="(item2, index2) in item.imgList" :key="index2">
            <image :src="'https://jxjsservice.jxfit.cn/file' + item2.img" />
            <view class="names">{{item2.name}}</view>
            <view class="createTime">{{item2.createTime}}</view>
          </view>
        </view>
        <textarea v-model="item.remark" placeholder="请输入完整的问题描述~" class="textareas mbttom15" />
        </view>
        <view @click="jump" :data-src="'./Static_evaluation_list_details'" class="add-contrast u-f-ajc">+ 添加新的对比照</view>
      </view>
      <view class="btn-button u-f-ajc" @click="submit" data-src="./Assessment_results">生成报告</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        user: {},
				title: '',
        list: [],
			}
		},
    onLoad(e) {
      this.user = uni.getStorageSync("phyUser");
      if (uni.getStorageSync("list").length) {
        this.list = uni.getStorageSync("list");
        console.log(111)
      }
      this.title = uni.getStorageSync("title");
      this.list.push(uni.getStorageSync("item"));
    },
		methods: {
      deleteItem(index) {
        this.list.splice(index, 1);
      },
      async submit(e) {
        let data = {
          "bId": 1,
          "gymId": 0,
          "memberId": this.user.userId,
          "name": this.title,
          "userId": uni.getStorageSync("openid"),
          "picArray": [],
        }
        this.list.forEach((item, index) => {
          let obj = {
            "picBefore": "string",
            "picAfter": "string",
            "describe": "string",
            "picBeforeTime": "string",
            "picAfterTime": "string",
          }
          obj.picBefore = item.imgList[0].img;
          obj.picAfter = item.imgList[1].img;
          obj.picBeforeTime = item.imgList[0].createTime;
          obj.picAfterTime = item.imgList[1].createTime;
          obj.describe = item.remark;
          data.picArray.push(obj)
        })
        if (!data.name) {
          uni.showToast({
            title: "请输入标题~",
            icon: "loading"
          })
          return
        } else if (!data.picArray.length) {
            uni.showToast({
              title: "请添加对比照",
              icon: "loading"
            })
            return
        } else {
          uni.showToast({
            title: "生成中~",
            icon: "success"
          })
          let res = await this.$myRuquest({
            url: "/coach/body/addBodyContrastBodyState",
            method: "POST",
            data,
            header: {
              "Content-Type": "application/json"
            },
          })
          uni.showToast({
            title: "生成成功~",
            icon: "success"
          })
          uni.redirectTo({
            url: e.currentTarget.dataset.src
          })
          uni.setStorageSync("item", '');
          uni.setStorageSync("title", '');
          uni.setStorageSync("list", '');
        }
      },
      jump(e) {
        let url = e.currentTarget.dataset.src;
        if (url.indexOf('Static_evaluation_list_details') != -1) {
          uni.setStorageSync("title", this.title)
          uni.setStorageSync("list", this.list)
        }
        uni.navigateTo({
          url
        });
      },
		}
	}
</script>

<style lang="scss">
  page {
    background-color: #F7F5F8 !important;
  }
	.title {
    padding: 14rpx 30rpx;
    background-color: #FFFFFF;
    >view {
      padding: 20rpx 0;
    }
    >input {
      text-align: right;
    }
  }
  .contents {
    padding: 20rpx;
    background-color: #FFFFFF;
    .abs {
      position: absolute;
      right: 10rpx;
      top: 0;
      z-index: 2;
      font-size: 50rpx;
    }
    >view {
      width: 50%;
      height: 400rpx;
      color: #FFFFFF;
      image {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
      .names {
        position: absolute;
        left: 20rpx;
        bottom: 60rpx;
        font-size: 30rpx;
      }
      .createTime {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;
        font-size: 24rpx;
      }
    }
  }
  .textareas {
    width: 100%;
    padding: 20rpx;
    height: 200rpx;
    background-color: #fff;
  }
  .add-contrast {
    width: 100%;
    padding: 30rpx 0;
    color: #39BB9E;
    background-color: #fff;
  }
  .btn-button {
    width: 100%;
    height: 100rpx;
    background-color: $uni-color-zhuti;
    color: #FFFFFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
